<template>
    <el-container>
        <el-header :height="'auto'" class="mb20">
            <breadcrumb :title="'资源审批列表'" :noBack="true"></breadcrumb>
        </el-header>
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-input v-model="resName" placeholder="输入资源名称" class="input short mr10"
                                      size="small"></el-input>
                            <el-input v-model="applyNum" placeholder="输入申请单号" class="input short"
                                      size="small"></el-input>
                            <select-tree @loadNode="loadNode"
                                         :size="'small'"
                                         :loading.sync="provideDeptTree.loading"
                                         :renderTree.sync="provideDeptTree.renderTree"
                                         :lazy.sync="provideDeptTree.lazy"
                                         :clearable.sync="provideDeptTree.clearable"
                                         :filterable.sync="provideDeptTree.filterable"
                                         :model.sync="dept"
                                         :accordion.sync="provideDeptTree.accordion"
                                         :expandAll.sync="provideDeptTree.expandAll"
                                         :provideDeptTree="provideDeptTree"
                                         @filterMethod="dataFilter"
                                         :props="dataConsumersprops"
                                         :options="provideDeptTree.options"
                                         @nodeClick="treeNodeClick"
                                         class="select short">
                            </select-tree>
                            <el-select v-model="resourcesValue" placeholder="审批状态" class="select short mr10"
                                       size="small">
                                <el-option
                                    v-for="item in resourcesOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <!--                            <el-select v-model="sharingState" placeholder="共享方式" class="select short mr10" size="small">-->
                            <!--                                <el-option-->
                            <!--                                    v-for="item in sharingOptions"-->
                            <!--                                    :key="item.value"-->
                            <!--                                    :label="item.label"-->
                            <!--                                    :value="item.value">-->
                            <!--                                </el-option>-->
                            <!--                            </el-select>-->
                            <!--                            <el-select v-model="frequencyValue" placeholder="更新频率" class="select short mr10"-->
                            <!--                                       size="small">-->
                            <!--                                <el-option-->
                            <!--                                    v-for="item in frequencyOptions"-->
                            <!--                                    :key="item.value"-->
                            <!--                                    :label="item.label"-->
                            <!--                                    :value="item.value">-->
                            <!--                                </el-option>-->
                            <!--                            </el-select>-->
                            <el-date-picker v-model="searchTime" size="small" class="short mr10"
                                            type="daterange"
                                            range-separator="~"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                            </el-date-picker>
                            <el-button class="primary" @click="getList()" size="small">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" :height="'100%'"
                                   ref="table">
                        <template slot="resPower" slot-scope="scope">
                            <span v-if="scope.row.resPower==2">受限</span>
                            <span v-else-if="scope.row.resPower==1">公开</span>
                        </template>
                        <template slot="state" slot-scope="scope">
                            <span v-if="scope.row.state==2||scope.row.state==3">待审核</span>
                            <span v-else-if="scope.row.state==4">审核中</span>
                            <span v-else-if="scope.row.state==5">已取消</span>
                            <span v-else-if="scope.row.state==6">审核通过</span>
                            <span v-else-if="scope.row.state==7" class="error">审核不通过</span>
                        </template>
                        <!--                        <template slot="updateFrequency" slot-scope="scope">-->
                        <!--                            <span>{{frequencyOptions | listFilter(scope.row.updateFrequency, 'value', 'label')}}</span>-->
                        <!--                        </template>-->
                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <el-link type="primary" :underline="false" class="mr10" @click="openDialog(scope.row)"
                                         v-if="scope.row.approvalResult == 1">审批
                                </el-link>
                                <el-link type="primary" :underline="false" @click="openDetail(scope.row)">查看</el-link>
                            </div>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="paging" v-if="paging" class="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <dialog-box :show.sync="show" ref="dialog" :width="'600px'" :title="'审批详情'" @save="auditSave"
                        @cancel="auditDel">
                <audit :labelWidth="'90px'" :showType.sync="currentList.preselectRes?true:false" ref="audit"
                       v-if="show"></audit>
            </dialog-box>
            <transition name="slide">
                <router-view @upload="getList"></router-view>
            </transition>
        </el-main>
    </el-container>
</template>
<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import dialogBox from '../../components/dialog'
    import audit from '../../components/audit'
    import selectTree from '../../components/select-tree'

    export default {

        data() {
            return {
                resourcesOptions: [
                    {
                        label: '',
                        value: null
                    },
                    {
                        label: '未审批',
                        value: 1
                    },
                    {
                        label: '已审批',
                        value: 2
                    }
                ],
                resourcesValue: null,
                sharingOptions: [
                    {
                        label: '',
                        value: null
                    },
                    {
                        label: '公开',
                        value: 1
                    },
                    {
                        label: '受限',
                        value: 2
                    }
                ],
                sharingState: '',
                frequencyOptions: [
                    {
                        label: '',
                        value: null
                    },
                    {
                        label: '实时',
                        value: 1
                    },
                    {
                        label: '每小时',
                        value: 2
                    },
                    {
                        label: '每天',
                        value: 3
                    },
                    {
                        label: '每月',
                        value: 4
                    },
                    {
                        label: '每季度',
                        value: 5
                    },
                    {
                        label: '每半年',
                        value: 6
                    },
                    {
                        label: '每年',
                        value: 7
                    },
                    {
                        label: '不更新',
                        value: 8
                    },
                    {
                        label: '不定时',
                        value: 9
                    }
                ],
                frequencyValue: '',
                tableData: [],
                header: [
                    {
                        prop: 'applicationNum',
                        label: '申请单号',
                        minWidth: '170',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resName',
                        label: '资源名称',
                        minWidth: '170',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'applyDeptName',
                        label: '申请部门',
                        minWidth: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resPower',
                        label: '共享方式',
                        minWidth: '100',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    // {
                    //     prop: 'updateFrequency',
                    //     label: '更新频率',
                    //     minWidth: '100',
                    //     align: 'center',
                    //     headerAlign: 'center'
                    // },
                    {
                        prop: 'applyTime',
                        label: '创建时间',
                        width: '150',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'state',
                        label: '当前状态',
                        width: '100',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '100',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation', 'updateFrequency', 'resPower', 'state'],
                loading: false,
                index: 1,
                orderNo: '',
                paging: {},
                searchTime: [], // 搜索时间
                resName: '', // 资源名称
                applyNum: '', // 申请单号
                show: false, // 是否打开审核弹窗
                currentList: null, // 当前点击行
                dept: {
                    value: '',
                    label: ''
                }, // 搜索部门
                dataConsumersprops: {
                    value: 'code', // ID字段名
                    label: 'label', // 显示名称
                    // children: 'haschildren', // 子级字段名
                    isLeaf: function (data, node) { // 是否为子节点
                        if (!data.expand) return true
                    }
                }, // 数据源部门
                provideDeptTree: { // 数据源部门树形下拉框参数
                    lazy: true,
                    clearable: false,
                    filterable: false,
                    accordion: false, // 一次只展开一个同级节点
                    expandAll: false, // 默认展开所有节点
                    loading: false, // 是否显示loading
                    renderTree: true, // 是否显示tree，隐藏后再次显示以此来重新渲染
                    options: []
                }
            }
        },
        mounted() {
            if (this.$route.meta.title) this.title = this.$route.meta.title
            this.getList()
        },
        methods: {
            // 打开对话框
            openDialog(row) {
                this.currentList = row
                this.show = true
            },
            // 审批保存
            auditSave() {
                let form = this.$refs.audit.formData, _this = this
                this.show = false
                this.loading = true
                this.$http.post('/rdResForOnline/applyToOnline', {
                    applicationNum: this.currentList.applicationNum,
                    resId: this.currentList.resId,
                    result: form.state,
                    auditOpinion: form.remark,
                    preselectResType: form.type
                }).then(result => {
                    if (result.success) {
                        setTimeout(() => {
                            _this.loading = false
                            _this.getList()
                        }, 1000)
                    } else {
                        this.loading = false
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 关闭对话框
            auditDel() {
                this.show = false
                this.currentList = null
            },
            // 获取列表数据
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/rdResForOnline/selectMyApplyNotOnLine', {
                    // resSituation: 1,
                    // result: this.resourcesValue,
                    current: this.index || 1,
                    size: 15,
                    result: this.resourcesValue, // 审批状态
                    resName: this.resName, // 资源名称
                    creatTime: this.searchTime[0] ? this.$filter.timeFormat(this.searchTime[0], 'YYYY-MM-DD') : '', // 起始时间
                    endTime: this.searchTime[1] ? this.$filter.timeFormat(this.searchTime[1], 'YYYY-MM-DD') : '', // 结束时间
                    // resPower: this.sharingState, // 共享方式
                    // updateFrequency: this.frequencyValue // 更新频率
                    applicantDept: this.dept.value, // 申请部门
                    applicationNum: this.applyNum // 申请单号
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.paging = result.data
                        delete this.paging['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            reset() {
                this.searchTime = []
                this.resName = ''
                this.applyNum = ''
                this.dept = {
                    value: '',
                    label: ''
                }
                this.resourcesValue = null
                this.sharingState = null
                this.frequencyValue = null
                this.getList(1)
            },
            // 打开查看页面
            openDetail(row) {
                this.$router.push({
                    path: this.$route.path + '/detail',
                    query: {
                        applyNumChild: row.applicationNum,
                        id: row.id,
                        offLine: true,
                        preselectRes: row.preselectRes === 1
                    }
                })
            },
            // 获取树形结构数据-搜索
            dataFilter(event, callback) {
                if (this.selectTreeFilter) clearTimeout(this.selectTreeFilter)
                if (event || event !== '') {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = false
                        this.$http.get('/admin/getDeptList', {
                            keyWord: event
                        }).then(result => {
                            if (result.success) {
                                this.provideDeptTree.loading = false
                                this.provideDeptTree.options = this.$method.treeProcess(result.data)
                            }
                            this.selectTreeFilter = null
                            if (callback) callback()
                        }).catch(() => {
                            this.provideDeptTree.loading = false
                            this.selectTreeFilter = null
                            if (callback) callback()
                        })
                    }, 300)
                } else {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = true
                        if (callback) callback()
                    }, 300)
                }

            },
            loadNode(parentId, callback) {
                if (!parentId && this.firstDeptList) {
                    this.provideDeptTree.loading = false
                    if (callback) callback(this.firstDeptList)
                } else {
                    this.$http.get('/admin/getDeptList', {
                        deptId: parentId || ''
                    }).then(result => {
                        if (result.success) {
                            if (result.data[0]) {
                                result.data.forEach(item => {
                                    if (item.expand) {
                                        item.isLeaf = false
                                    } else {
                                        item.isLeaf = true
                                    }
                                    if (!item.label) {
                                        item.label = item.abbreviation || item.name
                                    }
                                })
                                if (!this.firstDeptList) this.firstDeptList = result.data
                            }
                            this.provideDeptTree.loading = false
                            if (callback) callback(result.data)
                        }
                    }).catch(() => {
                        this.provideDeptTree.loading = false
                    })
                }
            },
            treeNodeClick(node, callback) {
                if (callback) callback()
            }
        },
        components: {
            tableExample,
            breadcrumb,
            page,
            dialogBox,
            audit,
            selectTree
        }
    }
</script>

<style scoped lang="less">
</style>
